<template>
  <div class="page-container">
    <splitpanes style="height: 100%" class="default-theme">
      <pane size="10">
        <organize-tree
          style="width: 100%; padding: 2px 0 0"
          :is-hide-setting="true"
        ></organize-tree>
      </pane>
      <pane :size="calendarView == 'list' ? 100 : 90">
        <div style="height: 100%; background: var(--next-bg-main-color)">
          <div class="page-calendar">
            <calendar
              :defaultView="calendarView"
              :belongsUser="belongs"
              :currentUser="currentOrganize"
              :organizeList="organizeList"
              @changeDate="changeDate"
              @submitForm="submitForm"
              @delEvent="delEvent"
              @addSummary="addSummary"
              @completeEvent="completeEvent"
              @warningArrClick="warningClick"
              @changeOrganize="changeOrganize"
            ></calendar>
          </div>
        </div>
      </pane>
    </splitpanes>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
import Calendar from "/@/views/home/component/Calendar/index.vue";
import OrganizeTree from "/@/components/organize/index.vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { ElMessage, ElMessageBox } from "element-plus";
import { getEventList } from '/@/stores/home'
import { useCalendarConfig } from '/@/stores/calendar';
import { storeToRefs } from 'pinia';

// import {homeApi} from "/@/api/home/index.ts"
export default {
  name: "calendar-home",
  components: {
    Calendar,
    OrganizeTree,
    Splitpanes,
    Pane,
  },
  setup() {
    // const homeCalendar = homeApi();
    // const res =  homeCalendar.getMatterCodes({})
    // console.log(res,"render")
    const { proxy } = getCurrentInstance()
		const storesCalendarConfig = useCalendarConfig();
    const { calendarConfig } = storeToRefs(storesCalendarConfig)
    const state = reactive({
      eventStatus:[],
      result_data:true,
      events: [],
      belongs: [],
      currentOrganize: '1',
      organizeList: [{
          id: 1,
          label: '个人',
          isPenultimate: false
        },
        {
          id: 2,
          label: '17科技公司',
          isPenultimate: false,
          children: [
            {
              id: 5,
              label: '华南区',
              isPenultimate: false,
              children: [{
                id: 9,
                label: '广东组',
                isPenultimate: false,
                children: [{
                  id: 10,
                  label: '李医',
                  isPenultimate: false,
                },{
                  id: 11,
                  label: '小二',
                  isPenultimate: false,
                },{
                  id: 12,
                  label: '罗三',
                  isPenultimate: false,
                }]
              }]
            },
            {
              id: 6,
              label: '华北区',
              isPenultimate: false
            },
            {
              id: 7,
              label: '西北区',
              isPenultimate: false,
              children: [
                {
                  id: 27,
                  label: '宁夏组',
                  isPenultimate: false
                },
                {
                  id: 28,
                  label: '新疆组',
                  isPenultimate: false
                },
              ],
            }
          ],
        }],
      calendarView: calendarConfig.value.view
    });
    // 获取当时间
    const warningClick = (e) =>{
      if(e){
        var arr = []
      if(e){
        for(let i = 0 ;i<state.events.length;i++){
          if(state.events[i].Warning===1){
            arr.push(state.events[i])
          }
        };
        state.eventStatus = state.events
        state.events = arr
      }
      }else{

      }
    }
    // getfor()
    const changeDate = (e) => {
      console.log(e);
    };
    const submitForm = (e) => {
      console.log(e);
    };
    // 删除事项
    const delEvent = (e) => {
      console.log('del => ', e)
      // const index = state.events.findIndex((item) => {
      //   return item.id == e.id;
      // });
      // console.log(index);
      // ElMessageBox.confirm("是否确认删除该事件?", "提示", {
      //   confirmButtonText: "确认",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     // state.events.splice(index, 1);
      //     // ElMessage.success("删除成功");
      //   })
      //   .catch(() => {});
    };
    // 添加周总结
    const addSummary = (e) => {
      console.log(e);
    };
    // 完成事件
    const completeEvent = (e) => {
      console.log(e);
    };
    // 切换组织
    const changeOrganize = e => {
      console.log(e)
    }
    onMounted(() => {
      // 监听视图切换
      proxy.mittBus.on('switchCalendarView', e => {
        state.calendarView = e.type
        storesCalendarConfig.setCalendarConfig({
          view: e.type
        })
      })
    })
    return {
      ...toRefs(state),
      changeDate,
      submitForm,
      delEvent,
      addSummary,
      completeEvent,
      warningClick,
      changeOrganize,
    };
  },
};
</script>
<style scoped lang="scss">
.page-container {
  height: 100vh;
  background: var(--next-color-white);
  padding: 0 !important;
  .page-calendar {
    padding: 0 10px 10px 10px;
    flex: 1;
    height: 100%;
  }
}
:deep(.default-theme.splitpanes--vertical > .splitpanes__splitter, .default-theme
    .splitpanes--vertical
    > .splitpanes__splitter) {
  border-color: #e4e7ed;
  border-right: 1px solid #e4e7ed;
}
:deep(.splitpanes.default-theme .splitpanes__splitter::before) {
  margin-left: -1.5px;
}
:deep(.splitpanes.default-theme .splitpanes__splitter:after) {
  margin-left: 0;
}
.duration1 {
  --animate-duration: 0.8s;
}
:deep(.layout-container .layout-main){
  overflow-x: auto;
}
</style>
